<script setup>
import { Card, Descriptions, DescriptionsItem, Image } from 'ant-design-vue';

import pruductImage from '#/assets/images/product.png';

defineProps(['detailInfo']);
</script>

<template>
  <Card>
    <div class="flex items-center">
      <div class="pr-5">
        <Image :src="pruductImage" :width="200" />
      </div>
      <div>
        <div class="mb-4 font-bold">
          <div class="mr-2 inline-block text-xl">
            {{ detailInfo.groupName || '消费组名称' }}
          </div>
        </div>
        <Descriptions>
          <DescriptionsItem label="企业编号">
            {{ detailInfo.tenantId }}
          </DescriptionsItem>
          <DescriptionsItem label="消费组ID">
            {{ detailInfo.groupIdentifier }}
          </DescriptionsItem>
          <DescriptionsItem label="创建时间">
            {{ detailInfo.createTime }}
          </DescriptionsItem>
        </Descriptions>
      </div>
    </div>
  </Card>
</template>

<style lang="scss" scoped>
:deep(.ant-descriptions-item-container) {
  .ant-descriptions-item-label {
    color: #999;
  }

  .ant-descriptions-item-content {
    color: #333;
  }
}
</style>
